import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet,View,ImageBackground} from 'react-native';
import {scaleSize} from '../../../utils/screen';
import FontText from '../FontText';
const Colors = ["#e68443","#959595","#80c269","#13b5b1"];
import {CachedImage} from "react-native-img-cache";
import _ from 'lodash';
import {i18n} from '../../../i18n/index';
export default class ProductItem extends Component {
    render() {
        let {name,price,index,name2,images,version = 1,isSelected = false} = this.props;
        return (
            <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                onLongPress = {()=>this.onLongPress()}
                style = {[styles.box,{backgroundColor:Colors[(index>-1 && index < Colors.length)?index:Math.floor(Math.random()*4)]},{
                    borderColor:isSelected?"#fd265d":"#090d17"
                }]}>
                <View style = {styles.mView}>
                    <View style = {{flex:1,alignItems:"flex-start"}}>
                        <FontText numberOfLines = {3} style = {styles.name} font={'book'}>{name+name2}</FontText>
                    </View>
                    <FontText style = {[styles.name,{textAlign:"right"}]} font={'book'}>{i18n.t("moneytype")+price}</FontText>
                </View>
                <Image source = {{uri:`${_.get(images,"[0].url","")}?v=${version}`}} style = {styles.imgbg} />
            </TouchableOpacity>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
    onLongPress(){
        let {onLongPress} = this.props;
        onLongPress && onLongPress();
    }
}
const styles = StyleSheet.create({
    box:{
        height:scaleSize(344),
        width:scaleSize(344),
        justifyContent: 'flex-end',
        borderWidth:2,
        borderColor:"#090d17",
        overflow:"hidden"
    },
    name:{
        color:"#fff",
        fontSize: scaleSize(32)
    },
    mView:{
        backgroundColor: "rgba(255,255,255,0.2)",
        height:scaleSize(200),
        paddingHorizontal: scaleSize(12),
        paddingVertical: scaleSize(18),
    },
    imgbg:{
        height:scaleSize(336),
        width:scaleSize(336),
        position:"absolute",
        left:0,
        top:0,
        zIndex:-1
    }
})